<template>
    <view>
        <u-popup v-model="visible" mode="center" width="80%" :mask-close-able="false" :closeable="true" @close="visible = false" border-radius="15">
            <view class="p-4 pt-8">
                <view class="text-center text-xl">临时签到</view>

                <!-- 选择学生 单选 -->
                <u-form :model="form">
                    <u-form-item>
                        <u-search placeholder="输入学生姓名" v-model="studentName" @change="searchStudent"></u-search>
                    </u-form-item>
                    <u-form-item label="学生" v-if="students.length > 0">
                          <u-radio-group v-model="form.student" :wrap="true" @change="searchCourse">
                            <u-radio v-for="(item, index) in students" :key="index" :checked="index == 0" :name="item.id">{{ item.name }}</u-radio> </br>
                        </u-radio-group>
                    </u-form-item>
                    
                    <u-form-item label="课程" v-if="courses.length > 0">
                         <u-radio-group v-model="form.course" :wrap="true">
                            <u-radio v-for="(item, index) in courses" :key="index" :name="item.course_id">{{ item.course.name }}</u-radio> </br>
                        </u-radio-group>
                    </u-form-item>

                     <u-form-item label="课时">
                         <u-radio-group v-model="form.num">
                            <u-radio v-for="(item, index) in [1,2,3]" :key="index" :name="item">{{ item }}</u-radio> </br>
                        </u-radio-group>
                    </u-form-item>

                    <u-form-item>
                        <u-button type="primary" size="medium" @click="sign">提交签到</u-button>
                    </u-form-item>
                </u-form>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { http } from '@/utils/http'
export default {
    name: 'TempSign',
    components: {
    },
    props: {
    },
    data() {
        return {
            visible: false,
            studentName: '',
            form: {
                student: 0,
                course: 0,
                num: 1
            },
            students: [],
            courses: [],
            arrangeCourseId: 0
        }
    },
    methods: {
        show(arrangeCourseId) {
            this.arrangeCourseId = arrangeCourseId
            this.visible = true
        },
        searchStudent(){
            console.log(this.studentName)
            if(this.studentName === '') {
                this.students = []
                this.courses = []
                this.form.student = 0
                this.form.course = 0
                return
            }
            http.get('/api-mini/student/search?studentName=' + this.studentName).then(res => { 
                this.students = res.data
                if(this.students.length > 0) {
                    this.form.student = this.students[0].id
                    this.searchCourse()
                }
            })
        },
        searchCourse() {
            this.courses = []
            this.form.course = 0
            http.get('/api-mini/student/course/list?studentId=' + this.form.student).then(res => {
                this.courses = res.data
                if(this.courses.length > 0) {
                    this.form.course = this.courses[0].id
                }
            })
        },
        sign(){
            if(this.form.student === 0 || this.form.course === 0) {
                uni.showToast({
                    title: '请选择学生和课程',
                    icon: 'none'
                })
                return
            }

            const data = { 
                arrange_course_id: this.arrangeCourseId,
                course_id: this.form.course,
                student_id: this.form.student,
                course_num: this.form.num,
                result: 1
            }

            this.visible = false
            uni.showModal({ title: '确定签到吗？' }).then(res => { 
                if(res.confirm) {
                     http.post('/api-mini/teacher/course/sign', data).then(res => {
                        if (res.code === 200) {
                            uni.showToast({ title: '签到成功', icon: 'success' })
                            setTimeout(() => { this.visible = false }, 2000)
                        } else {
                            uni.showToast({ title: res.msg, icon: 'none' })
                        }
                    })
                } else {
                    this.visible = true
                }
            })
        }
    }
}
</script>
